<template>
  <div>
    <a-image :width="200" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
    <div class="bsx_com bsx_intro" v-if="traceSourceInfo.basicInfo">
      <div class="his_tit">公司介绍</div>

      <div
        class="intro_p"
        v-for="item in this.traceSourceInfo.basicInfo"
        :key="item.id"
        v-html="item.companyIntroduction"
      ></div>
    </div>
    <div class="bsx_com bsx_intro" v-if="traceSourceInfo.visualImg">
      <div class="his_tit">图片展示</div>
      <div class="intro_img" v-for="vis in this.traceSourceInfo.visualImg" :key="vis.id">
        <img v-if="traceSourceInfo.visualImg" :src="'http://localhost:51004/zzzs/' + vis.imageUrl" />
      </div>
    </div>
    <div class="bsx_com bsx_intro">
      <div class="his_tit">产品介绍</div>

      <div>
        <div class="intro_1">{{ traceSourceInfo.productRecording.productName }}</div>


        <div class="intro_3">产品规格: {{ traceSourceInfo.productRecording.productStandard }}</div>
        <div class="intro_3">产品合格标准: {{ traceSourceInfo.productRecording.productConformityStandard }}</div>
        <div class="intro_3">产地: {{ traceSourceInfo.productRecording.placeOfOrigin }}</div>
        <div class="intro_3">产品介绍{{ traceSourceInfo.productRecording.productPresentation }}</div>
      </div>
    </div>

    <div class="bsx_com bsx_his">
      <div class="his_tit">种植信息</div>
      <div class="his_cont">
        <a-steps direction="vertical" style="margin-top: 2%">
          <a-step title="播种" v-if="this.traceSourceInfo.sowingList">
            <template slot="description" >
              <div
                v-for="(item, index) in this.traceSourceInfo.sowingList"
                :key="item.id"
                :style="{ borderBottom: index != traceSourceInfo.sowingList.length - 1 ? '1px solid #d3d3d3' : '' }"
              >
                <div class="intro_p2"><span class="intro_p1">播种期:</span>{{ item.timeOfSowing }}</div>
                <div class="intro_p2"><span class="intro_p1">播种量:</span>{{ item.amountOfSeeding }}</div>
                <div class="intro_p2"><span class="intro_p1">播种深度:</span>{{ item.depthOfSeeding }}</div>
              </div>
            </template>
          </a-step>
          <a-step title="施肥" v-if="this.traceSourceInfo.fertilizationManagementList">
            <template slot="description" >
              <div
                v-for="(item, index) in this.traceSourceInfo.fertilizationManagementList"
                :style="{
                  borderBottom:
                    index != traceSourceInfo.fertilizationManagementList.length - 1 ? '1px solid #d3d3d3' : '',
                }"
                :key="item.id"
              >
                <div class="intro_p2"><span class="intro_p1">施肥时间:</span>{{ item.timeOfFertilization }}</div>
                <div class="intro_p2"><span class="intro_p1">施肥人:</span>{{ item.fertilizeMan }}</div>
                <div class="intro_p2"><span class="intro_p1">施肥作物:</span>{{ item.fertilizedCrop }}</div>
              </div>
            </template>
          </a-step>
          <a-step title="打药" v-if="this.traceSourceInfo.dosingManagementList">
            <template slot="description" >
              <div
                v-for="(item, index) in this.traceSourceInfo.dosingManagementList"
                :style="{
                  borderBottom: index != traceSourceInfo.dosingManagementList.length - 1 ? '1px solid #d3d3d3' : '',
                }"
                :key="item.id"
              >
                <div class="intro_p2"><span class="intro_p1">打药时间:</span>{{ item.dosageTime }}</div>
                <div class="intro_p2"><span class="intro_p1">负责人:</span>{{ item.inCharge }}</div>
                <div class="intro_p2"><span class="intro_p1">打药作物:</span>{{ item.druggedCrop }}</div>
              </div>
            </template>
          </a-step>
          <a-step title="病虫害防治" v-if="this.traceSourceInfo.diseaseControlList">
            <template slot="description">
              <div
                v-for="(item, index) in this.traceSourceInfo.diseaseControlList"
                :style="{
                  borderBottom: index != traceSourceInfo.diseaseControlList.length - 1 ? '1px solid #d3d3d3' : '',
                }"
                :key="item.id"
              >
                <div class="intro_p2"><span class="intro_p1">病虫草害名称:</span>{{ item.diseasesName }}</div>
                <div class="intro_p2"><span class="intro_p1">发生时间:</span>{{ item.timeOfOccurrence }}</div>
                <div class="intro_p2">
                  <span class="intro_p1">防治方式:</span>{{ item.preventionAndControlMethods }}
                </div>
              </div>
            </template>
          </a-step>
          <a-step title="采摘" v-if="this.traceSourceInfo.harvestList">
            <template slot="description">
              <div
                v-for="(item, index) in this.traceSourceInfo.harvestList"
                :style="{
                  borderBottom: index != traceSourceInfo.harvestList.length - 1 ? '1px solid #d3d3d3' : '',
                }"
                :key="item.id"
              >
                <div class="intro_p2"><span class="intro_p1">采摘时间:</span>{{ item.pluckingTime }}</div>
                <div class="intro_p2"><span class="intro_p1">数量:</span>{{ item.number }}</div>
                <div class="intro_p2"><span class="intro_p1">方式:</span>{{ item.mode }}</div>
              </div>
            </template>
          </a-step>
        </a-steps>
      </div>
    </div>
    <!-- <div class="bsx_c_cont" v-if="traceSourceInfo.qualityImg != null">
      <div class="bsx_header" style="background: green">检测报告</div>
      <div class="c_cont_img img_li">
        <div class="bsx_com c_cont">
          <img
            v-for="item in traceSourceInfo.qualityImg.imgUrlList"
            :key="item"
            :src="'http://8.142.150.80:10000/trace-source/' + item"
          />
        </div>
      </div>
    </div> -->
    <!-- <div class="bsx_c_cont" v-if="traceSourceInfo.organicImg != null">
      <div class="bsx_header" style="background: blue">有机认证证书</div>
      <div class="c_cont_img img_li">
        <div class="bsx_com c_cont">
          <img
            v-for="item in traceSourceInfo.organicImg.authenticationImgs"
            :key="item"
            :src="'http://8.142.150.80:10000/trace-source/' + item"
          />
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'

import { httpAction, getAction } from '@/api/manage'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      traceSourceInfo: {},
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getTraceSourceInfo(id) {
      getAction(`/modules/zzzsProductRecording/traceSource/${id}`).then((res) => {
        console.log(res)
        this.traceSourceInfo = res.result
      })
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    let productId = this.$route.query.productId
    this.getTraceSourceInfo(productId)
    console.log(this.traceSourceInfo)
  },
  //声明周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style >
* {
  font-family: '微软雅黑';
  font-size: 14px;
  padding: 0;
  margin: 0;
}
.ant-steps-item-title {
  color: rgba(0, 0, 0, 0.85) !important;
}
body {
  background: #f0f0f0;
}

img {
  border: 0;
}

.bsx_com {
  border-bottom: 1px solid #d3d3d3;
  border-top: 1px solid #d3d3d3;
  padding: 0 2%;
  background: #fff;
  margin-bottom: 20px;
  text-align: center;
}

.bsx_check {
  color: #f60000;
  font-size: 16px;
  border-top: 0;
  height: 40px;
  line-height: 40px;
}

.bsx_check_txt {
  height: 40px;
  line-height: 40px;
}

.bsx_check_txt a {
  position: relative;
  color: #000;
  text-decoration: none;
  padding: 0 15px 0 4px;
}

.arr {
  position: absolute;
  z-index: 100;
  border-top: 6px solid #387dda;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  right: 0;
  top: 40%;
}

.bsx_intro {
  overflow: auto;
  zoom: 1;
}

.intro_img {
  padding-top: 2%;
  padding-bottom: 2%;
  border-bottom: 1px solid #d3d3d3 !important;
  width: 100%;
}

.intro_img img {
  max-height: 500px;

  max-width: 500px;
}

.intro_p {
  padding-top: 2%;
  padding-bottom: 2%;
  border-bottom: 1px solid #dadada;
}

.intro_p1 {
  color: rgba(0, 0, 0, 0.85) !important;
  font-weight: bold !important;
  text-align: left !important;
  font-size: 16px !important ;
  padding-right: 5px;
  line-height: 30px !important;
}
.intro_1 {
  margin-top: 5px;
  color: rgba(0, 0, 0, 0.85) !important;
  font-weight: bold !important;

  font-size: 22px !important ;

  line-height: 30px !important;
}
.intro_p2 {
  text-align: left;
  line-height: 30px;
}
.intro_2 {
  color: rgba(0, 0, 0, 0.85) !important;
  line-height: 30px;
}
.intro_p3 {
  text-align: left;
  line-height: 30px;
}
.intro_3 {
  color: rgba(0, 0, 0, 0.85) !important;
  line-height: 30px;
}
.bsx_cont {
  line-height: 24px;
  text-align: left;
  text-indent: 2em;
  padding-top: 5px;
  padding-bottom: 5px;
}

.bsx_his {
}

.his_tit {
  text-align: center;
  line-height: 40px;
  height: 40px;
  color: rgba(0, 0, 0, 0.85) !important;
  border-bottom: 1px solid #d3d3d3;
  font-size: 16px;
}

.his_cont {
  text-align: left;
}

.cont_list_s {
  overflow: auto;
  zoom: 1;
  /* background: url(../style/bg.jpg) repeat-y 11px; */
  width: 100%;
}
.ant-steps-item-icon {
  background: #1890ff !important;
}
.border_radius {
  border-radius: 24px;
  width: 24px;
  height: 24px;
  background: #387dda;
  float: left;
  margin-top: 5px;
}

.cont_list {
  overflow: auto;
  zoom: 1;
  line-height: 24px;
  border-bottom: 1px solid #d3d3d3;
  float: left;
  margin-left: 20px;
  padding: 5px 2px;
  width: 80%;
}
.ant-steps-icon {
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.table_1 {
  float: left;
  width: 40%;
}

.table_2 {
  float: left;
  width: 50%;
}
.table_3 {
  float: left;
  width: 10%;
}

.cont_list_last {
  border-bottom: 0;
}

.bsx_c_cont {
}

.bsx_header {
  text-align: center;
  background: #387dda;
  color: #fff;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}

.c_cont {
  padding-top: 10px;
}

.c_cont_img img {
  vertical-align: middle;
  height: auto;
  width: 100%;
}

.c_cont_tit {
  border-bottom: 2px solid #030303;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}

.c_cont_table tr td {
  text-align: left;
  padding-left: 4px;
  line-height: 24px;
}

.c_cont_table tr th {
  text-align: left;
  padding-left: 4px;
  line-height: 24px;
}

.img_li {
  margin-top: 10px;
}

.c_cont_p {
  line-height: 24px;
  color: #000;
  text-align: left;
  margin-top: 5px;
}

.bill_com {
  overflow: auto;
  zoom: 1;
  margin-top: 10px;
  padding-left: 15px;
}

.bill_com b {
  float: left;
  font-weight: normal;
  width: 20%;
  text-align: left;
  line-height: 24px;
  min-width: 60px;
}

.bill_com input {
  float: left;
  height: 24px;
  padding: 0 3px;
  border: 1px solid #dadada;
}

.bill_com textarea {
  float: left;
  line-height: 22px;
  padding: 0 3px;
  border: 1px solid #dadada;
}

.bill_3 input {
  width: 220px;
}

.bill_4 input {
  width: 100px;
}

.bill_butt {
  display: block;
  background: #387dda;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  margin: 18px auto;
}

/*页脚*/
.hs_foot {
  background: #f0f0f0;
  width: 100%;
  text-align: center;
  margin: 20px 0;
  text-align: center;
}

.hs_foot p {
  color: #4e4e4e;
  font-size: 14px;
  text-align: center;
}
</style>